<template>
  <div class="autonav">
    <el-tabs v-model="activeName">
      <el-tab-pane label="电力监控" name="first">
        <dianli></dianli>
      </el-tab-pane>
      <el-tab-pane label="主通风在线监控" name="second">
        <zhutongfeng></zhutongfeng>
      </el-tab-pane>
      <el-tab-pane label="主排水监控" name="third">
        <zhupaishui></zhupaishui>
      </el-tab-pane>
      <el-tab-pane label="压风机监控" name="fourth">
        <yafengji></yafengji>
      </el-tab-pane>
      <el-tab-pane label="提升机监控" name="five">
        <tishengji></tishengji>
      </el-tab-pane>
      <el-tab-pane label="主运皮带监控" name="six">
        <pidai></pidai>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import dianli from './dianli.vue'
import zhutongfeng from './zhutongfeng.vue'
import zhupaishui from './zhupaishui.vue'
import yafengji from './yafengji.vue'
import tishengji from './tishengji.vue'
import pidai from './pidai.vue'
export default {
  components: { dianli, zhupaishui, zhutongfeng, yafengji, tishengji, pidai },
  data() {
    return {
      activeName: 'first'
    }
  },
  created() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.autonav {
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #15203a;
  ::v-deep .el-tabs__item {
    color: #fff;
    padding: 0 45px;
    height: 65px;
    box-sizing: border-box;
    line-height: 65px;
    display: inline-block;
    list-style: none;
    font-size: 0.2rem;
    font-weight: 500;
    position: relative;
  }
  ::v-deep .el-tabs__item.is-active {
    background: url(../../../assets/images/img50.png) no-repeat;
    background-size: 100% 100%;
  }
  ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 45px;
  }
  ::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
    padding-right: 45px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #3d6b93;
    z-index: 1;
  }
  .autolist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    li {
      width: calc(25% - 30px);
      cursor: pointer;
      margin: 12px 15px;
      background-color: var(--color-bg-2);
      box-shadow: 1px 0 0 0 var(--color-neutral-3),
        0 1px 0 0 var(--color-neutral-3), 1px 1px 0 0 var(--color-neutral-3),
        1px 0 0 0 var(--color-neutral-3) inset,
        0 1px 0 0 var(--color-neutral-3) inset;
      cursor: pointer;
      img {
        width: 100%;
        height: 2.2rem;
        border: 1px solid #fff;
      }
      p {
        line-height: 0.25rem;
        font-size: 0.2rem;
        margin-top: 0.1rem;
        color: #32bcff;
        background-image: -webkit-linear-gradient(top, #fff, #82dbfc, #32bcff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 550;
      }
    }
  }
}
::v-deep .el-tabs__content {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0%;
  bottom: 0;
}
</style>